<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>我的订单</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<script src="themes/js/vue.js"></script>
</head>
<body>
	<div id="el">
	<header class="aui-header-default aui-header-fixed ">
		<a href="javascript:history.back(-1)" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">
				<div class="">我的订单</div>
			</div>
		</div>
		<a href="#" class="aui-header-item-icon"   style="min-width:0">
			<i class="aui-icon aui-icon-search"></i>
		</a>
	</header>

	<section class="aui-myOrder-content">
		<div class="m-tab demo-small-pitch" data-ydui-tab>
			<div class="aui-myOrder-fix">
				<ul class="tab-nav">
					<li class="tab-nav-item tab-active"><a href="javascript:;">全部</a></li>
					<li class="tab-nav-item"><a href="javascript:;">待付款</a></li>
					<li class="tab-nav-item"><a href="javascript:;">待发货</a></li>
					<li class="tab-nav-item"><a href="javascript:;">待收货</a></li>
					<li class="tab-nav-item"><a href="javascript:;">评价</a></li>
				</ul>
			</div>
<!--			<div class="aui-prompt"><i class="aui-icon aui-prompt-sm"></i>双十一期间发货及物流时效公告</div>-->
			<div class="tab-panel">
				<div class="tab-panel-item tab-active">
					<ul v-html="allorder">
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">待付款</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
								<div class="aui-list-product-fl-img">
									<img src="themes/img/pd/sf-1.jpg" alt="">
								</div>
								<div class="aui-list-product-fl-text">
									<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
									<div class="aui-list-product-fl-mes">
										<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
											<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
										</div>
										<div class="aui-btn-purchase">
											x1
										</div>
									</div>
								</div>
							</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-1.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="aui-list-title-btn" style="color: red;font-size: 18px">
							合计 ¥495.65
							</div>
							<div class="aui-list-title-btn">

								<a href="#">取消订货</a>
								<a href="#" class="red-color">立即付款</a>
							</div>
							<div class="aui-dri"></div>
						</li>
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">已发货</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-2.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">查看物流</a>
								<a href="#" class="red-color">确认收货</a>
							</div>
							<div class="aui-dri"></div>
						</li>
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">已发货</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-4.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">催物流</a>
								<a href="#">查看物流</a>
								<a href="#" class="red-color">确认收货</a>
							</div>
							<div class="aui-dri"></div>
						</li>
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">交易成功</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-5.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">删除订单</a>
							</div>
							<div class="aui-dri"></div>
						</li>
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">交易成功</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-6.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">删除订单</a>
								<a href="#">查看物流</a>
								<a href="#">追加评价</a>
							</div>
							<div class="aui-dri"></div>
						</li>
					</ul>
			</div>
			<!--	待付款-->
				<div class="tab-panel-item">
					<ul v-html="myorder1">
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">待付款</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-12.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">取消订货</a>
								<a href="#" class="red-color">立即付款</a>
							</div>
							<div class="aui-dri"></div>
						</li>
					</ul>
				</div>
				<!--代发货-->
				<div class="tab-panel-item">
					<ul v-html="myorder2">
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">待付款</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-11.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">取消订货</a>
								<a href="#" class="red-color">立即付款</a>
							</div>
							<div class="aui-dri"></div>
						</li>
					</ul>
				</div>
				<div class="tab-panel-item">
					<ul v-html="myorder3">
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">待付款</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-10.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">查看物流</a>
								<a href="#" class="red-color">确认收货</a>
							</div>
							<div class="aui-dri"></div>
						</li>
					</ul>
				</div>
				<!--dai fahuo-->
				<div class="tab-panel-item">
					<ul v-html="myorder4">
						<li>
							<div class="aui-list-title-info">
								<a href="#" class="aui-well ">
									<div class="aui-well-bd">2017-11-14</div>
									<div class="aui-well-ft">待付款</div>
								</a>
								<a href="javascript:;" class="aui-list-product-fl-item">
									<div class="aui-list-product-fl-img">
										<img src="themes/img/pd/sf-9.jpg" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										<em>¥</em>
										399.99
									</span>
												<span class="aui-list-product-item-del-price">
										¥495.65
									</span>
											</div>
											<div class="aui-btn-purchase">
												x1
											</div>
										</div>
									</div>

								</a>
							</div>
							<div class="aui-list-title-btn">
								<a href="#">查看订单</a>
								<a href="#" class="red-color">评价送币</a>
							</div>
							<div class="aui-dri"></div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</section>
	</div>

	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script type="text/javascript" >
        /**
         * Javascript API调用Tab
         */
        !function ($) {
            var $tab = $('#J_Tab');

            $tab.tab({
                nav: '.tab-nav-item',
                panel: '.tab-panel-item',
                activeClass: 'tab-active'
            });

			/*
			 $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
			 console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
			 });
			 */

            $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
            });
        }(jQuery);

		shouhuo=function(e){

			var name=$(e).attr("name");
			$.ajax({
				url:"/weixin/shouhuo",
				data:{myorderid:name},
				type:"get",
				dataType: "json",
				success:function(data){
					if(data.obj!=null){
						location.reload();
					}else{
						alert("请收货后在确认");
					}
				}

			})
		}
	</script>

	<script>
  var vue=new Vue({
	  el: "#el",
	  data: {
		  allorder: "",
		  myorder1: "",
		  myorder2: "",
		  myorder3: "",
		  myorder4: "",
	  },
	  created: function () {
this.queryOrder();
	  },
	  methods: {
		  queryOrder:function(){
			  var _this = this;
			  $.ajax({
				  url: "/weixin/queryOrder",
				  data: {},
				  type: "get",
				  dataType: "json",
				  success:function(data){
					  var a = "";
					  var b = "";
					  var c = "";
					  var d = "";
					  var e = "";
					  if (data.li != null && data.li.length != 0) {
						  for(var i=0;i<data.li.length;i++){
						  	var str="";
						  	var str2="";
						  	if(data.li[i].myorderStatus==0){
						  		str="待付款";
								str2=`<div class="aui-list-title-btn" style="color: red;font-size: 18px">
										合计 ¥${data.li[i].myorderTotalPrice}
										</div>
										<div class="aui-list-title-btn">
										<a href="#">取消订货</a>
										<a href="#" class="red-color">立即付款</a>
										</div>
										<div class="aui-dri"></div>
										</li>`
							}else if(data.li[i].myorderStatus==1){
						  		str="待发货";
								str2=`<div class="aui-list-title-btn" style="color: red;font-size: 18px">
										合计 ¥${data.li[i].myorderTotalPrice}
										</div>
										<div class="aui-list-title-btn">
										<a href="#">取消订货</a>
										</div>
										<div class="aui-dri"></div>
										</li>`
							}else if(data.li[i].myorderStatus==2){
						  		str="待收货";
								str2=`<div class="aui-list-title-btn" style="color: red;font-size: 18px">
										合计 ¥${data.li[i].myorderTotalPrice}
										</div>
										<div class="aui-list-title-btn">
										<a href="wuliu.html?myorderId=${data.li[i].myorderId}">查看物流</a>
										<a  name="${data.li[i].myorderId}"   onclick="shouhuo(this)">确认收货</a>
										</div>
										<div class="aui-dri"></div>
										</li>`
							}else if(data.li[i].myorderStatus==3){
								str="待评价";
								str2=`<div class="aui-list-title-btn" style="color: red;font-size: 18px">
										合计 ¥${data.li[i].myorderTotalPrice}
										</div>
										<div class="aui-list-title-btn">
										<a href="#">评价订单</a>
										</div>
										<div class="aui-dri"></div>
										</li>`
							}else if(data.li[i].myorderStatus==4){
								str="交易关闭";
								str2=`<div class="aui-list-title-btn" style="color: red;font-size: 18px">
										合计 ¥${data.li[i].myorderTotalPrice}
										</div>
										<div class="aui-list-title-btn">
										<a href="#">查看退款流程</a>
										</div>
										<div class="aui-dri"></div>
										</li>`
							}else if(data.li[i].myorderStatus==5){
								str="交易完成";
								str2=`<div class="aui-list-title-btn" style="color: red;font-size: 18px">
										合计 ¥${data.li[i].myorderTotalPrice}
										</div>
										<div class="aui-dri"></div>
										</li>`
							}
							var str1=`<li>
									<div class="aui-list-title-info">
									  <a href="#" class="aui-well ">
									  <div class="aui-well-bd">${data.li[i].myorderTime}</div>
									  <div class="aui-well-ft">${str}</div>
									  </a>`
							  for(var j=0;j<data.li[i].myorderDetails.length;j++){
								  str1=str1+`<a href="javascript:;" class="aui-list-product-fl-item">
										  <div class="aui-list-product-fl-img">
										  <img src="${data.li[i].myorderDetails[j].product.productImg}" alt="">
										  </div>
										  <div class="aui-list-product-fl-text">
										  <h3 class="aui-list-product-fl-title">${data.li[i].myorderDetails[j].product.productDesc}</h3>
								  <div class="aui-list-product-fl-mes">
										  <div>
										  <span class="aui-list-product-item-price">
										  <em>¥</em>
								  ${data.li[i].myorderDetails[j].product.promotionPrice}
								  </span>
								  <span class="aui-list-product-item-del-price">
										  ¥${data.li[i].myorderDetails[j].product.productPrice}
								  </span>
								  </div>
								  <div class="aui-btn-purchase">
										  x${data.li[i].myorderDetails[j].productNum}
										  </div>
										  </div>
										  </div>
										  </a>`
							  }
							var strAl=str1+str2;
							  a=a+strAl;
							  if(data.li[i].myorderStatus==0){
								  b=b+strAl
							  }else if(data.li[i].myorderStatus==1){
								  c=c+strAl
							  }else if(data.li[i].myorderStatus==2){
								  d=d+strAl
							  }else if(data.li[i].myorderStatus==3){
									e=e+strAl
							  }

						  }
							_this.allorder=a;
						  _this.myorder1=b;
						  _this.myorder2=c;
						  _this.myorder3=d;
						  _this.myorder4=e;
					  }
				  }
			  })
		  },
		  shouhuo:function(event){
		  				alert(event)
				var name=event.target.name;
				alert(name);
				$.ajax({
					url:"/weixin/shouhuo",
					data:{myorderid:name},
					type:"get",
					dataType: "json",
					success:function(data){
						if(data.obj!=null){
							location.reload();
						}else{
							alert("请收货后在确认");
						}
					}

				})
		  }
		  //queryorder结束
	  }


  })
	</script>
</body>
</html>